<template>
    <view class="w-full">
        <view
            class="px-[18rpx] border border-solid border-lightc border-light rounded-[10rpx] h-[100rpx] items-center flex">
            <input class="flex-1" v-model="formData.username" type="text" placeholder="输入手机号"
                placeholder-style="color:#c9c9cb" @confirm="" />
        </view>
        <view
            class="px-[18rpx]  border border-solid border-light rounded-[10rpx] flex h-[100rpx] items-center mt-[40rpx]">
            <input class="flex-1" placeholder-class="text" :password="showPassword" v-model="formData.password"
                type="text" placeholder="输入验证码" placeholder-style="color:#c9c9cb" @confirm="" />
            <navigator url="/pages/forget_pwd/forget_pwd" hover-class="none">
                <view class="border-l border-solid border-0 border-light pl-3 text-muted leading-4 ml-3">
                    获取验证码
                </view>
            </navigator>
        </view>
        <privacy-vue class="mt-[40rpx]" v-model:is-read="isRead"></privacy-vue>
        <button class="bg-[#d3a5ff] text-white mt-[60rpx]" @click="handleLogin">登录</button>
        <view class="flex justify-between line-clamp-6 mt-[30rpx] text-base"
            v-if="appStore.getLoginConfig.loginWay.includes(LoginWayEnum.ACCOUNT)">
            <view>
                已有账号，使用
                <text class="text-primary display-inline-block" @click="handleSwitchPasswordLogin">
                    密码登录
                </text>
            </view>
            <text @click="toRegisterPage">
                注册账号
            </text>
        </view>
    </view>
    <modal-agreement-vue ref="modalAgreementRef" @confirm="handleModalConfirm"
        v-model:is-read="isRead"></modal-agreement-vue>
</template>
<script lang="ts" setup>
import modalAgreementVue from './modalAgreement.vue'
import PrivacyVue from './privacy.vue'
import { LoginWayEnum } from '@/enums/appEnums'
import { useAppStore } from '@/store/modules/app'
const appStore = useAppStore()
const modalAgreementRef = ref<InstanceType<typeof modalAgreementVue>>()
const formData = reactive({
    username: '',
    password: '',
    isRead: false
})
const isRead = ref(false)

const showPassword = ref(true)
const formRules = reactive({
    username: {
        rules: [
            {
                required: true,
                errorMessage: '请输入用户名'
            }
        ]
    },
    password: {
        rules: [
            {
                required: true,
                errorMessage: '请输入密码'
            }
        ]
    }
})
function handleLogin() {
    console.log("login")
    if (!isRead.value) {
        modalAgreementRef.value?.open()
    }
}
function handleModalConfirm() {
    isRead.value = true
}
// 切换密码登录
function handleSwitchPasswordLogin() {
    appStore.setCurrentLoginWay(LoginWayEnum.ACCOUNT)
}
function toRegisterPage() {
    uni.navigateTo({
        url: '/pages/register/index'
    })
}
</script>
<style lang="scss" scoped></style>